<template>
  <div class="register">
    <van-nav-bar>
      <template #title>
        <h3 class="title">漫单漫画</h3>
      </template>
      <template #right>
        <span class="register" @click="goLogin">登录</span>
      </template>
    </van-nav-bar>
    <div class="logo">
      <img src="../assets/logo.png" alt />
    </div>
    <van-form @submit="Register">
      <van-field
        v-model="userinfo.phone"
        name="phone"
        label="手机号"
        autocomplete="off"
        placeholder="输入你的手机号"
        :rules="[{ required: true, message: '请填写手机号' },{ pattern:/^1[3456789]\d{9}$/, message: '请填写正确手机号格式' }]"
      />
      <van-field
        v-model="userinfo.password"
        :type="isClose?'text':'password'"
        name="password"
        label="密码"
        autocomplete="off"
        placeholder="输入你的密码"
        :rules="[{ required: true, message: '请填写密码' },{ pattern:/^[a-zA-Z0-9_-]{4,16}$/, message: '密码格式错误' }]"
        :right-icon="isClose?'eye-o':'closed-eye'"
        @click-right-icon="showPassword"
      />
      <van-field
        v-model="userinfo.username"
        type="text"
        name="username"
        label="用户名"
        autocomplete="off"
        placeholder="输入你的用户名"
        :rules="[{ required: true, message: '请填写用户名' },{ pattern:/^[\u4E00-\u9FA5]{2,6}$/, message: '用户名格式错误' }]"
      />
      <div style="margin: 16px;">
        <van-button round block color="#5c55ff" native-type="submit">注册</van-button>
      </div>
    </van-form>
    <div class="tips">
      <span>提示:</span>
      <p>1.输入11位数的手机号</p>
      <p>2.输入以字母开头的4~16位的密码</p>
      <p>3.输入2~6位的中文不包含其他字符</p>
    </div>
  </div>
</template>
  
  <script>
import { Toast } from "vant";
export default {
  name: "Register",
  data() {
    return {
      userinfo: {
        phone: "",
        password: "",
        username: ""
      },
      isClose: false
    };
  },
  methods: {
   Register() {
      //本地存储注册用户信息
      let users = localStorage.getItem("userinfo");
      if (users) {
        users = JSON.parse(users);
      } else {
        users = [];
      }
      //判断手机号是否重复注册
      for (let i = 0; i < users.length; i++) {
        if (users[i].phone === this.userinfo.phone) {
          Toast("该手机号已经注册!");
          return;
        }
      }
      users.push(this.userinfo);
      localStorage.setItem("userinfo", JSON.stringify(users));
      Toast("注册成功!");
      //注册成功,两秒后跳到登录页面
      setTimeout(()=>{
        this.$router.push("/login");
      },2000)
    },
    goLogin() {
      this.$router.push("/login");
    },
    //显示密码
    showPassword() {
      this.isClose = !this.isClose;
    }
  }
};
</script>
  
  <style lang="scss" scoped>
.register {
  .title,
  .register {
    color: #333;
  }
  .logo {
    text-align: center;
    height: 180px;
    padding-top: 50px;
    box-sizing: border-box;
  }
  ::v-deep .van-button {
    margin-top: 40px;
  }
  .tips {
    padding: 10px;
    color: #aaa;
    margin-top: 20px;
  }
}
</style>